import React, { useState, useMemo } from 'react'
import { Button } from 'antd';
import { useEffect } from 'react';
import { useCallback } from 'react';
import staffHook from './staffHook'
import StaffC from './staffC'


import myContext from './myContext'
export default function () {
    const [count, setCount] = useState(0)
    const [num2, setNum2] = staffHook(50)

    console.log('num2', num2)
    const [person, setPerson] = useState({ name: '张三', age: 22 })
    let count1 = useMemo(function () {
        return count + 20
    })
    function getPersonAge() {
        return person.age
    }
    let getName = useCallback(function () {
        getPersonAge()
    }, [person.age])
    useEffect(function () {
        console.log("count变动 我会显示")
        var t = setInterval(function () {
            console.log('我是定时器')
        }, 1000)
        return function () {
            clearInterval(t)
        }
    }, [])
    let num = count + 10
    function btnClick() {
        console.log('btnClick')
        // count++
        setCount(count=>count + 1)
        person.age += 1;
        person.name = 'lisi'
        setPerson(person)
        setNum2(num2 + 200)
    }

    return (
        <>
            <div>{count}</div>
            <div>num:{num}</div>
            <div>num2:{num2}</div>
            <div>count1:{count1}</div>
            <div>getName:{getName()}</div>
            <div>person:{person.name} -- {person.age}</div>
            {/* <Button type="primary" onClick={() => { btnClick() }}>Primary Button</Button> */}
            <Button type="primary" onClick={btnClick}>Primary Button</Button>
            <myContext.Provider value={myContext}>
                <StaffC {...{name:'a',b:'b'}}></StaffC>
            </myContext.Provider>

        </>
    )
}
